<template>
  <view class="change-password">
    <mt-navbar :title="pdWarning === 0 ? '修改密码' : '设置密码'">
      <template #right>
        <text class="text-#1484EE text-28rpx" @click="handleSubmit">保存</text>
      </template>
    </mt-navbar>

    <view class="mt-32rpx">
      <uv-form ref="passwordFormRef" label-position="left" label-width="auto" :rules="rules" :model="passwordForm">
        <!-- <mt-title title="原密码"></mt-title> -->
        <view v-if="pdWarning === 0" class="bg-#ffffff">
          <uv-form-item prop="info.oldPassword" label="原密码：" required class="mt-16rpx">
            <view class="w-100%" style="position: relative">
              <uv-input v-model="passwordForm.info.oldPassword" placeholder="请输入原密码" :password="isShowOldPassword" border="none" maxlength="20">
              </uv-input>
              <view
                class="text-28rpx text-1C213E pr-40rpx"
                style="position: absolute; right: 0; top: 0"
                @click="isShowOldPassword = !isShowOldPassword"
              >
                <image
                  :src="
                    !isShowOldPassword
                      ? 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-open.svg'
                      : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-close.svg'
                  "
                  class="w-32rpx h-32rpx mt-15rpx"
                ></image>
              </view>
            </view>
          </uv-form-item>
        </view>
        <!-- <mt-title title="新密码" class="mt-56rpx"></mt-title> -->
        <view class="bg-#ffffff mt-16rpx">
          <uv-form-item prop="info.password" label="新密码：" required>
            <view class="w-100%" style="position: relative">
              <uv-input v-model="passwordForm.info.password" placeholder="请输入新密码" :password="isShowPassword" border="none" maxlength="20">
              </uv-input>
              <view class="text-28rpx text-1C213E pr-40rpx" style="position: absolute; right: 0; top: 0" @click="isShowPassword = !isShowPassword">
                <image
                  :src="
                    !isShowPassword
                      ? 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-open.svg'
                      : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-close.svg'
                  "
                  class="w-32rpx h-32rpx mt-15rpx"
                ></image>
              </view>
            </view>
          </uv-form-item>
        </view>

        <view class="bg-#ffffff">
          <uv-form-item prop="info.againPassword" label="再次确认密码：" required>
            <view class="w-100%" style="position: relative">
              <uv-input
                v-model="passwordForm.info.againPassword"
                placeholder="请再次确认密码"
                :password="isShowPasswordAgain"
                border="none"
                maxlength="20"
              >
              </uv-input>
              <view
                class="text-28rpx text-1C213E pr-40rpx"
                style="position: absolute; right: 0; top: 0"
                @click="isShowPasswordAgain = !isShowPasswordAgain"
              >
                <image
                  :src="
                    !isShowPasswordAgain
                      ? 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-open.svg'
                      : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-eyes-close.svg'
                  "
                  class="w-32rpx h-32rpx mt-15rpx"
                ></image>
              </view>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
      <!-- <mt-button class="w-100% mt-56rpx" style="border-radius: 192rpx" @click="handleSubmit">确认修改</mt-button> -->
    </view>
  </view>
</template>

<script name="ChangePassword" setup>
import { updateProviderPassword } from '@/api/index.js';
import { passwordCheck } from '@/utils/regular.js';

const passwordFormRef = ref(null);

const isShowPassword = ref(true);
const isShowOldPassword = ref(true);

const isShowPasswordAgain = ref(true);

const passwordForm = ref({
  info: {
    password: undefined,
    oldPassword: undefined,
    againPassword: undefined
  }
});

const rules = ref({
  'info.oldPassword': [
    {
      type: 'string',
      required: true,
      message: '请输入原密码',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        return passwordCheck(value);
      },
      message: '密码由 8 到 20 位的字母、数字或半角符号组成的字符串，并且确保该字符串不是 10 位以下的纯数字、纯字母或纯半角符号',
      trigger: ['blur']
    }
  ],
  'info.password': [
    {
      type: 'string',
      required: true,
      message: '请输入新密码',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        return passwordCheck(value);
      },
      message: '密码由 8 到 20 位的字母、数字或半角符号组成的字符串，并且确保该字符串不是 10 位以下的纯数字、纯字母或纯半角符号',
      trigger: ['blur']
    }
  ],
  'info.againPassword': [
    {
      type: 'string',
      required: true,
      message: '请再次输入密码',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        if (passwordForm.value.info.password !== value) return false;
      },
      message: '两次输入的密码不一致',
      trigger: ['blur']
    }
  ]
});

// 确认修改
const handleSubmit = async () => {
  passwordFormRef.value
    .validate()
    .then(async (valid) => {
      if (valid) {
        await updateProviderPassword(passwordForm.value.info);
        uni.reLaunch({
          url: '/pages/login/phoneQuick'
        });
        uni.showToast({
          title: '修改成功,请重新登录',
          icon: 'none'
        });
      }
    })
    .catch((errors) => {});
};

const pdWarning = ref(0);
onLoad((options) => {
  pdWarning.value = Number(options.pdWarning);
});
</script>

<style lang="scss" scoped>
.change-password {
  min-height: 100vh;
  background-color: #f7f7f7;
}

:deep(.uv-form) {
  .no-border {
    .uv-form-item {
      border-bottom: none;
    }
  }
  .uv-form-item {
    font-size: 28rpx;
    margin: 0 32rpx;
    border-bottom: 2rpx solid #e4e4e4;
    .uv-form-item__body {
      padding: 30rpx 0;
    }
    .uv-form-item__body__left__content__label {
      font-size: 28rpx;
      color: #727687;
      padding-left: 8rpx;
    }
  }
}
</style>
